<template>
	<view>
		<!-- 开头部分 -->
		<uni-nav-bar dark background-color="#2477f4" title="确认订单" :border="false" left-icon="left"
			@clickLeft="back"></uni-nav-bar>
		<view class="bc"></view>
		<view class="body">
			<view class="img1">
				<view>
					<image class="reservation1" src="/static/矩形 4.png" mode=""></image>
				</view>
				<view class="partition"></view>
				<view class="reservation">预约服务</view>
				<view>
					<image class="payment1" src="/static/矩形 4 拷贝.png" mode=""></image>
				</view>
				<view class="partition"></view>
				<view class="payment">支付订单</view>
				<view>
					<image class="SS1" src="/static/矩形 4 拷贝 2.png" mode=""></image>
				</view>
				<view class="SS">门店服务</view>
			</view>
			<view class="merchant">
				<view>
					<image src="/static/商家.png"></image>
				</view>
				<view class="address">
					<view>伟业汽车美容店（人民路店）</view>
					<view>山阳区人民路中路33号</view>
				</view>
			</view>
			<view class="staff">
				<view class="staff1">
					<image src="/static/人员.png" mode=""></image>
					<view>张先生</view>
				</view>
				<view>18656894566</view>
			</view>
			<!-- <view class="vehicle">
				<view class="vehicle1">
					<image src="/static/车辆-01.png" mode=""></image>
					<view>立即预约</view>
				</view>
				<view>
					<image src="/static/收起箭头小 拷贝.png"></image>
				</view>
			</view> -->
			<navigator url="/packageWash/pages/chooseCar/chooseCar" class="car">
				<view class="car1">
					<image src="/static/车辆-01.png" mode=""></image>
					<view>奔驰FWE4/豫A6487</view>
				</view>
				<view>
					<image src="/static/收起箭头小 拷贝.png"></image>
				</view>
			</navigator>
			<view class="product">
				<view>服务产品</view>
				<view>共选择<text>1项</text>服务产品</view>
			</view>
			<!-- <view class="setMenu">
				<view>
					精洗洗车<text>￥39.9</text>
				</view>
			</view> -->
			<view class="setMenu1">
				<view>
					精洗洗车<text>￥39.9</text>
				</view>
			</view>
			<navigator url="/packageWash/pages/coupons/coupons" class="coupon1">
				<view class="coupon">
					<image src="/static/优惠券.png" mode=""></image>
					<view>代金卷/优惠券</view>
				</view>
				<view class="money">
					<view>-10元</view>
					<image src="/static/收起箭头小 拷贝.png" mode=""></image>
				</view>
			</navigator>
		</view>
		<view class="bottom"></view>
		<view class="customerService">
			<view class="contact" @click="consumer">
				<image src="/static/客服.png" mode=""></image>
				<view>联系客服</view>
			</view>
			<view class="submit">
				<view>合计：￥39.9</view>
				<button @click="open">提交订单</button>
			</view>
		</view>
		<uni-popup ref="popup1" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="pop">
				<view class="number">
					18642589456
				</view>
				<view class="copy">
					复制
				</view>
				<view class="dial">
					取消拨号
				</view>
			</view>
		</uni-popup>
		<!-- 弹出框 -->
		<!-- <uni-popup ref="popup2" type="center">
			<view class="popup-content">
				<view class="popup-title">
					<uni-icons type="closeempty" size="20" class="uni-icon" color=#E8E8E8 @click="close"></uni-icons>
					<text>请输入支付密码</text>
				</view>
				<view class="platform">
					<text>车辆服务平台</text>
				</view>
				<view class="order-info">
					<text>￥{{ orderAmount }}</text>
				</view>
				<view class="pay">
					<text>支付方式</text>
					<view class="pay-name">
						<text>零钱</text>
					</view>
					<view class="arrow"></view>
				</view>
				<view class="password-input">
					
					<view type="safe-password" class="password-item" v-for="(item, index) in passwordLength" :key="index">
						<text :hidden="inputPassword.length <= index">●</text>
					</view>
				</view>
				<button @click="confirm">确认支付</button>
				
			</view>
		</uni-popup> -->

		<!-- 支付弹窗 -->
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="pay-dialog">
				<!-- 标题 -->
				<view class="dialog-title">
					<view @click="closePhone">×</view>
					<view>请输入支付密码</view>
				</view>
				<view>车辆服务平台</view>
				<!-- 金额 -->
				<view class="amount">￥39.90</view>
				<!-- 支付方式 -->
				<view class="pay-method" @click="openMethodPicker">
					<text>支付方式</text>
					<view class="method-right">
						<text>{{ currentMethod }}</text>
						<uni-icons type="arrowright" size="13" color="#999" style="padding-top: 4rpx;"></uni-icons>
					</view>
				</view>
				<!-- 密码输入框 -->
				<view class="pwd-inputs">
					<input v-for="(item, index) in 6" :key="index" :ref="'input'+index" v-model="pwdArr[index]"
						type="number" maxlength="1" :focus="index === currentFocus" @input="handleInput(index, $event)"
						@keyboardheightchange="keyboardHeight = $event.height" />
					<view class="fake-box">
						<view v-for="(item, index) in 6" :key="index" class="fake-item"
							:class="{ 'has-value': pwdArr[index] }">{{ pwdArr[index] ? '•' : '' }}</view>
					</view>
				</view>
				<!-- 键盘高度占位 -->
				<view :style="{height: keyboardHeight + 'px'}"></view>
			</view>
		</uni-popup>
		<!-- 支付方式选择 -->
		<uni-popup ref="methodPicker" type="bottom">
			<view class="method-picker">
				<view v-for="(item, index) in methods" :key="index" class="method-item" @click="selectMethod(index)">
					{{ item }}
				</view>
			</view>
		</uni-popup>

	</view>
</template>



<script>
	export default {

		data() {

			return {
				orderAmount: 39.09, //订单金额
				password: '',
				// passwordLength: 6, // 支付密码
				// inputPassword: '',
				currentMethod: '零钱',
				methods: ['零钱', '银行卡1', '银行卡2'],
				pwdArr: [],
				currentFocus: 0,
				keyboardHeight: 0,
				showPicker: false

			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			consumer() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参 数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup1.open('bottom')
			},
			// payOrder() {
			// 	this.$refs.popup2.open('center')
			// },
			// close() {
			// 	this.$refs.popup2.close()
			// },

			// confirmPayment() {
			// 	if (this.password) {

			// 		this.payOrder();
			// 	} else {
			// 		uni.showToast({
			// 			title: '请输入支付密码',
			// 			icon: 'none'
			// 		});
			// 	}
			// },

			// cancelPayment() {
			// 	this.$refs.popup.close();
			// },

			// openPayPasswordPopup() {
			// 	this.setData({
			// 		isPopupShow: true
			// 	});
			// },


			// closePayPasswordPopup() {
			// 	this.setData({
			// 		isPopupShow: false,
			// 		inputPassword: ''
			// 	});
			// },


			// confirm(){
			// 	uni.navigateTo({
			// 		url:"/packageWash/pages/success/success"
			// 	})
			// }
			open() {
				this.$refs.popup.open()
				this.currentFocus = 0
				this.pwdArr = []
			},
			handleInput(index, e) {
				if (e.detail.value) {
					if (index < 5) {
						this.currentFocus = index + 1
					} else {
						// 输入完成处理
						this.$refs.popup.close()
						const password = this.pwdArr.join('')
						console.log('支付密码：', password)
					}
				}
			},
			openMethodPicker() {
				this.$refs.methodPicker.open();
			},
			selectMethod(index) {
				this.currentMethod = this.methods[index]
				this.$refs.methodPicker.close()
			}

		}

	}
</script>



<style>
	.bc {
		width: 750rpx;
		height: 300rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
	}

	.navigation-bar {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #287BF6;
	}

	.navigation-bar>image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}

	.navigation-bar>text {
		color: #FFF;
		margin-right: 20rpx;
		flex-grow: 1;
		text-align: center;
	}



	.body {
		z-index: 10;
		top: 88rpx;
		width: 710rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		position: absolute;
		background-color: #FFF;
	}

	.img1 {
		display: flex;
		position: relative;
		border-bottom: 5px solid #E8E8E8;
		margin: 0 20rpx;
		padding-bottom: 30rpx;
	}

	.img1>view>image {
		width: 100rpx;
		height: 100rpx;
	}

	.partition {
		width: 150rpx;
		height: 1rpx;
		margin-top: 80rpx;
		border-bottom: 1px dashed #E8E8E8;
	}

	.reservation1 {
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.payment1 {
		margin-top: 30rpx;
	}

	.SS1 {
		margin-top: 30rpx;
	}

	.reservation {
		position: absolute;
		width: 70rpx;
		top: 45rpx;
		left: 75rpx;
		color: #FFF;
		font-size: 25rpx;
		line-height: 35rpx;
		font-weight: nomal;
	}

	.payment {
		position: absolute;
		width: 70rpx;
		top: 45rpx;
		left: 325rpx;
		color: #FFF;
		font-size: 25rpx;
		line-height: 35rpx;
		font-weight: nomal;
	}

	.SS {
		position: absolute;
		width: 70rpx;
		top: 45rpx;
		right: 25rpx;
		color: #FFF;
		font-size: 25rpx;
		line-height: 35rpx;
		font-weight: nomal;
	}

	.merchant {
		margin: 20rpx;
		display: flex;
		align-items: center;
	}

	.merchant>view>image {
		width: 40rpx;
		height: 40rpx;
	}

	.address {
		margin-left: 20rpx;
	}

	.address>view:nth-child(1) {
		font-weight: nomal;
	}

	.address>view:nth-child(2) {
		font-size: 24rpx;
		color: #979797;
	}

	.staff {
		display: flex;
		justify-content: space-between;
		margin: 0 20rpx;
	}

	.staff1 {
		display: flex;
	}

	.staff1>image {
		width: 40rpx;
		height: 40rpx;
	}

	.staff1>view {
		margin-left: 20rpx;
		font-weight: nomal;
	}

	.staff>view:nth-child(2) {
		color: #979797;
	}

	.vehicle {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
		font-weight: nomal;
	}

	.vehicle1 {
		display: flex;
	}

	.vehicle1>image {
		width: 40rpx;
		height: 40rpx;
	}

	.vehicle1>view {
		margin-left: 20rpx;
	}

	.vehicle>view:nth-child(2)>image {
		width: 20rpx;
		height: 30rpx;
	}

	.car {
		display: flex;
		justify-content: space-between;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E8E8E8;
		font-weight: nomal;
	}

	.car1 {
		display: flex;
	}

	.car1>image {
		width: 40rpx;
		height: 40rpx;
	}

	.car1>view {
		margin-left: 20rpx;
	}

	.car>view:nth-child(2)>image {
		width: 20rpx;
		height: 30rpx;
	}

	.product {
		display: flex;
		height: 88prx;
		justify-content: space-between;
		margin: 20rpx;
	}

	.product>view:nth-child(1) {
		font-size: 30rpx;
		font-weight: nomal;
	}

	.product>view:nth-child(2) {
		font-weight: nomal;
		font-size: 26rpx;
	}

	.product>view:nth-child(2)>text {
		color: #287BF6;
	}

	.setMenu {
		margin: 20rpx;
		font-weight: nomal;
	}

	.setMenu>view>text {
		margin-left: 20rpx;
		color: #FB3F00;
	}

	.setMenu1 {
		margin: 0 20rpx;
		font-weight: nomal;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.setMenu1>view>text {
		margin-left: 20rpx;
		color: #FB3F00;
	}

	.coupon1 {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 20rpx 0 20rpx;
	}

	.coupon {
		display: flex;
	}

	.coupon>view {
		margin-left: 20rpx;
		font-weight: nomal;
	}

	.coupon>image {
		width: 40rpx;
		height: 40rpx;
	}

	.money {
		display: flex;
	}

	.money>view {
		margin-right: 20rpx;
		color: #FB3F00;
		font-weight: nomal;
		padding-bottom: 30rpx;
	}

	.money>image {
		width: 20rpx;
		height: 30rpx;
		margin-top: 5rpx;
	}

	.bottom {
		height: 20rpx;
	}

	.customerService {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contact {
		display: flex;
		margin-left: 20rpx;
	}

	.contact>view {
		font-weight: nomal;
		margin-left: 10rpx;
	}

	.contact>image {
		width: 40rpx;
		height: 40rpx;
	}

	.submit {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.submit>view {
		margin-right: 10rpx;
		color: #FB3F00;
	}

	.submit>button {
		width: 250rpx;
		height: 88rpx;
		border-radius: 40rpx;
		background-color: #287BF6;
		color: #FFF;
		line-height: 88rpx;
		font-size: 30rpx;
	}

	.pop {
		text-align: center;
	}

	.number {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.copy {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 3px solid #E8E8E8;
	}

	.dial {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	/* 支付订单 */

	.popup-content {
		text-align: center;
		width: 610rpx;
		padding: 20px;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.popup-title {
		height: 88rpx;
		font-size: 32rpx;
		text-align: center;
		font-weight: 700;
		position: relative;
	}


	.uni-icon {
		position: absolute;
		left: 0;

	}

	.platform {
		height: 44rpx;
		line-height: 44rpx;
		margin-bottom: 20rpx;
	}

	.order-info {
		/* font-weight: bold; */
		font-size: 60rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E8E8E8;
		margin-bottom: 20rpx;

	}

	.pay {
		color: #979797;
		text-align: left;
		height: 44rpx;
		width: 610rpx;
		position: relative;

	}

	.pay .pay-name {
		text-align: right;
		position: absolute;
		right: 40rpx;
		top: 0;
	}

	.arrow {
		width: 15rpx;
		height: 15rpx;
		position: absolute;
		right: 20rpx;
		top: 14rpx;
		border-top: 2rpx solid #979797;
		border-right: 2rpx solid #979797;
		/* transform: rotateX(90deg); */
		transform: rotate(45deg);
		transform-origin: center;


	}

	.password-input {
		width: 610rpx;
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 20px;
	}

	.password-item {
		width: 40px;
		height: 40px;
		border: 1px solid #f2f2f2;
		margin: 0 5px;
		text-align: center;
		line-height: 30px;
		background-color: #f2f2f2;
		border-radius: 10rpx;
	}

	.button-group button {
		margin-bottom: 10px;
	}
	
	
	/* 支付弹窗样式 */
		.pay-dialog {
		  width: 570rpx;
		  background: #fff;
		  border-radius: 20rpx;
		  padding: 10rpx 20rpx;
		}
		.pay-dialog>view:nth-child(2){
			text-align: center;
			font-size: 26rpx;
			margin-bottom: 6rpx;
		}
		.dialog-title {
			position: relative;
		  text-align: center;
		  font-size: 30rpx;
		  margin: 30rpx 0 34rpx;
		}
		.dialog-title>view:nth-child(1){
			position: absolute;
			margin-right: auto;
			color: #999;
			top: -12rpx;
			left: 20rpx;
			font-size: 40rpx;
		}
		.amount {
		  text-align: center;
		  font-size: 64rpx;
		  color: #000;
			padding-bottom: 20rpx;
		  border-bottom: 4rpx solid #f8f8f8;
		}
		
		.pay-method {
		  display: flex;
		  justify-content: space-between;
		  padding: 15rpx 0;
		  font-size: 24rpx;
		  width: 540rpx;
		  margin: 0 auto;
		  color: #999;
		}
		
		.method-right {
		  display: flex;
		  align-items: center;
		}
		.pwd-inputs {
			width: 540rpx;
		  position: relative;
		  margin: 0 auto;
		  margin-top: 10rpx;
		  margin-bottom: 50rpx;
		  display: flex;
		  justify-content: space-between;
		}
		
		.pwd-inputs input {
		  width: 40rpx;
		  height: 50rpx;
		  opacity: 0;
		  position: relative;
		  z-index: 2;
		}
		
		.fake-box {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  display: flex;
		  justify-content: space-between;
		}
		
		.fake-item {
		  width: 66rpx;
		  height: 66rpx;
		  background-color: #f2f2f2;
		  border-radius: 6rpx;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  font-size: 60rpx;
		}
		
		.has-value {
		  border-color: #07c160;
		}
		
		.method-picker {
			text-align: center;
		  background: #fff;
		}
		
		.method-item {
		  padding: 30rpx 0;
		  border-bottom: 1rpx solid #eee;
		}
</style>